<template>
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-left">
                    <div class="footer-logo">
                        <a href="/"
                            ><img src="http://pro99003c31.pic5.ysjianzhan.cn/upload/logo1.png" alt="菲斯生物"
                        /></a>
                    </div>
                </div>
                <div class="footer-middle">
                    <h3 class="contact-title">联系方式</h3>
                    <div class="contact-info">
                        <p>地址：深圳市龙华区民治街道民康路292号青创园D栋3A1</p>
                        <p>电话：4000505016&nbsp;&nbsp;&nbsp;QQ: 3001272453</p>
                        <p>传真：0086-755-28094224</p>
                        <p>邮箱：sales@phystandard.com</p>
                    </div>
                </div>
                <div class="footer-right">
                    <div class="qr-codes">
                        <div class="qr-code">
                            <img
                                src="http://pro99003c31.pic5.ysjianzhan.cn/upload/20180824154714_6373.jpg"
                                alt="公众微信平台"
                            />
                            <p>公众微信平台</p>
                        </div>
                        <div class="qr-code">
                            <img src="http://pro99003c31.pic5.ysjianzhan.cn/upload/index.png" alt="菲斯移动端官网" />
                            <p>菲斯移动端官网</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright">
                版权所有 © 2012-2020 深圳菲斯生物科技有限公司&nbsp;&nbsp;&nbsp;粤ICP备19111816号
            </div>
        </div>
    </footer>
</template>
<style scoped>
.footer {
    background: #4d5157;
    color: #999;
    padding: 40px 0 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-content {
    overflow: hidden;
    /* IE9 清除浮动 */
}

.footer-left {
    float: left;
    width: 30%;
}

.footer-logo {
    max-width: 200px;
    margin-bottom: 20px;
}

.footer-logo img {
    width: 100%;
    height: auto;
}

.footer-middle {
    float: left;
    width: 40%;
    text-align: left;
}

.footer-right {
    float: right;
    width: 30%;
    text-align: right;
}

.contact-title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
}

.contact-info {
    line-height: 2;
}

.qr-codes {
    font-size: 0;
    /* 清除图片间距 */
}

.qr-code {
    display: inline-block;
    width: 120px;
    margin-left: 20px;
    text-align: center;
}

.qr-code img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.qr-code p {
    font-size: 14px;
    color: #999;
}

.copyright {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #5d6167;
    text-align: center;
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .footer-left,
    .footer-middle,
    .footer-right {
        float: none;
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .footer-logo {
        margin: 0 auto 20px;
    }

    .qr-code {
        margin: 0 10px;
    }
}
</style>
